<template>
  <div class="container">
    <div class="box">
      <header class="header">
         <Back class="fan"/>
        <div class="tongzhi">系统通知
        </div>
      </header>
      <div class="content">
        <div class="notice-nav">
          <van-tabs v-model="activeName">
            <van-tab title="系统消息" name="a">系统消息</van-tab>
            <van-tab title="互动消息" name="b">互动消息</van-tab>
            <van-tab title="推送消息" name="c">推送消息</van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.tongzhi {
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: #36bc7c;
    line-height: 50px;
}
.fan {
    position: absolute;
    left: 10px;
    top: 10px;
}
  .notice-nav {
    width: 100%;
    height: 0.4rem;
    background: #fff;
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      li {
        height: 0.3rem;
        line-height: 0.3rem;
        text-align: center;
        font-weight: bold;
        margin: 0 15px;
      }
    }
  }
</style>

<script>
import Back from '@/components/Back.vue'
import Vue from 'vue'
import { Tab, Tabs } from 'vant'
Vue.use(Tab).use(Tabs)
export default {
  components: {
    Back
  },
  data () {
    return {
      activeName: 'a'
    }
  }
}
</script>
